<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		body{
			background: url(images/bg.jpg) no-repeat;
			background-size: cover;
		}
			#tank{
				position: absolute;
				left: 20px;
				top : 20px;
			}
			#ptank{
				position: absolute;
				right: 20px;
				top:20px ;
			}
		</style>
	</head>
	<body>
	    <audio src="images/bg-music.mp3" autoplay="autoplay" loop="loop"></audio>
		<div id="d1"></div>
		<img src="images/left.png" id="tank" />
		<img src="images/right.png" id="ptank"/>
		<script>
		    var speed = 10;
		    var tankpath = ["75 2","75 13","75 22","75 33","75 44","75 57","75 73","75 83","75 94","75 107","74 121","73 134","73 150","73 163","73 176","73 187","73 205","73 215","73 225","73 236","73 246","73 257","73 267","73 278","72 290","72 300","72 309","72 316","73 322","75 330","76 334","78 338","80 343","82 349","86 355","91 364","94 369","101 376","105 380","110 384","116 387","122 391","128 393","134 394","141 394","152 395","164 395","181 393","198 388","214 384","235 375","249 368","255 364","273 352","284 345","294 338","302 332","311 325","317 317","325 307","334 297","342 287","350 277","356 266","364 254","375 238","384 224","393 212","401 197","412 184","420 167","430 154","439 140","448 126","457 113","466 102","475 90","488 77","497 69","506 61","516 56","524 52","533 48","541 45","551 44","561 42","571 41","580 41","594 41","604 41","618 42","632 43","645 46","656 50","671 55","684 60","700 65","714 69","725 73","733 76","741 79","757 87","769 92","781 98","793 103","803 108","811 113","819 118","825 122","833 127","840 131","847 136","859 144","866 150","871 154","878 160","884 165","890 170","895 174","899 180","905 187","910 193","914 198","917 203","921 208","927 216","930 221","935 227","940 234","944 241","950 249","954 256","958 261","961 265","963 270","965 274","966 278","969 283","971 286","973 289","975 291","978 293","981 296","984 298","989 300","993 302","998 302","1003 302","1009 302","1020 301","1025 299","1031 297","1036 294","1040 291","1041 290","1042 288","1042 288","1093 569","1096 568","1098 567","1098 566","1092 562","1089 559","1085 557","1080 553","1078 551","1074 550","1073 549","1068 546","1064 544","1062 544","1059 542","1058 542","1056 542","1055 542","1053 544","1052 545","1050 545","1050 546","1049 546","1049 547","1050 547","1050 548","75 57","75 2","20 20"];
//			document.onmousemove = function(e){
//				tankpath.push(e.pageX+" "+e.pageY);
//				d1.innerHTML = tankpath;
//			}
            var j = 0;
            var timer = setInterval(function(){
            	if(j==tankpath.length){
            		clearInterval(timer);
            		return;
            	}
            	var path = tankpath[j];
            	var arr = path.split(" ");
            	tank.style.left = arr[0]+"px";
            	tank.style.top = arr[1]+"px";
            	j++;
            },30);
            document.onkeydown = function(e){
            	var code= e.keyCode;
            	console.log(code);
            	if(code == 68){
            		tank.src = "images/left.png";
            		tank.style.left = parseInt(tank.style.left)+speed+"px";
            	}else if(code == 65){
            		tank.src = "images/right.png";
            		tank.style.left = parseInt(tank.style.left)-speed+"px";
            	}else if(code == 87){
            		tank.src = "images/top.png";
            		tank.style.top = parseInt(tank.style.top)-speed+"px";
            	}else if(code == 83){
            		tank.src = "images/down.png";
            		tank.style.top = parseInt(tank.style.top)+speed+"px";
            	}else if(code == 75){
            		var bullet = document.createElement("img");
            		bullet.src = "images/bullet.png";
            		bullet.style.position = "absolute";
            		var tx = parseInt(tank.style.left);
            		var ty = parseInt(tank.style.top);
            		bullet.style.left = (tx+40)+"px";
            		bullet.style.top = (ty+10)+"px";
            		document.body.appendChild(bullet);
            		var timer1 = setInterval(function(){
            			bullet.style.left = parseInt(bullet.style.left) + speed +"px";
            			if(parseInt(bullet.style.left)>=1400){
            				ptankbomb();
            				clearInterval(timer1);
            				document.body.removeChild(bullet);
            			}
            		},30);
            	}
            };
            var i = 1;
            function ptankbomb(){
            	var music = new Audio();
            	music.src = "http://fjdx.sc.chinaz.com/files/download/sound1/201212/2516.wav";
            	music.play();
            	var timer = setInterval(function(){
            		if(i==3){
            			clearInterval(timer);
            			document.body.removeChild(ptank);
            			return;
            		}
            		ptank.src ="images/" + i + ".gif";
            		i++;
            	},100)
            }
		</script>
	</body>
</html>
